<template>
  <div class="btn" @click="isShowLayer = !isShowLayer" :class="{ hide: isShowLayer }">
    <img src="../assets/image/layer.png" alt="" width="30px" />
  </div>
  <div id="layer-tree" :class="{ hide: isShowLayer }">
    <div class="title">图层目录树</div>
    <el-tree
      style="max-width: 600px"
      :data="list"
      show-checkbox
      node-key="id"
      :default-expand-all="true"
      :default-checked-keys="[3,4,5,6,7]"
      :props="defaultProps"
      @check-change="handleNodeClick"
    >
      <!-- <img src="../assets/image/area.png" alt="" />111 -->
    </el-tree>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { docLayer } from '@/hook/LoadBasicMap'
const DocName = import.meta.env.VITE_DOC_NAME
// let $map = null
const defaultProps = {
  children: 'children',
  label: 'label'
}
const isShowLayer = ref(true)
const list = ref()
const handleNodeClick = (data, node) => {
  if (data.id > 2) {
    docLayer.setLayerStatus(data.id - 3, node ? 'include' : 'exclude')
  }
}

onMounted(() => {
  var docCatalog = new Zondy.Catalog.MapDoc({
    docName: DocName
  })
  docCatalog.getLayersInfo((data) => {
    list.value = [
      {
        id: 1,
        label: '地图文档',
        disabled: true,
        children: [
          {
            id: 2,
            label: '光谷智慧交通',
            disabled: true,
            children: []
          }
        ]
      }
    ]
    data.value.forEach((item) => {
      list.value[0].children[0].children.push({
        id: Number(item.LayerIndex) + 3,
        label: item.Name
      })
    })
  })
})
</script>

<style scoped>
#layer-tree {
  position: fixed;
  top: 100px;
  right: 0px;
  width: 200px;
  height: 65vh;
  background-color: #fff;
  opacity: 0.9;
  border-radius: 10px 0px 0px 10px;
  transition: all 0.5s ease;
}
.el-tree {
  padding: 20px 10px;
}
.title {
  font-size: 16px;
  color: #ffd04b;
  padding: 10px 20px;
  background-color: #545c64;
  border-radius: 10px 0px 0px 0px;
}
.btn {
  position: fixed;
  top: 330px;
  right: 180px;
  padding: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffd04b;
  z-index: 2;
  transition: all 0.5s ease;
  cursor: pointer;
  box-sizing: border-box;
}
img {
  width: 100%;
  height: 100%;
}
.hide {
  transform: translateX(200px);
  transition: all 0.5s ease;
}
</style>
